<!-- 危险货物信息 -->
<template>
    <Modal :value="value" @input="handleInput" width="746" :closable="false" class="danger-goodsInfo-modal">
        <div slot="header">
            危险货物信息
            <Icon class="f-fr" type="ios-close" @click="closeModel"/>
        </div>
        <Form class="clearfix" inline ref="dangerDataRef" :model="dangerData" :rules="rule" :label-width="120">
            <FormItem label="非危险化学品" prop="noDangFlag" class="noDangFlag">
                <RemoteSearch
                    :disabled="editORshow"
                    v-model="dangerData.noDangFlag"
                    placeholder="非危险化学品"
                    :list="noDangFlagList"
                    keywordFiled="label"
                    valueField="value"
                    :labelFieldList="['value', 'label']"
                ></RemoteSearch>
            </FormItem>
            <FormItem label="UN编码" prop="unCode">
                <Input v-model="dangerData.unCode" placeholder="UN编码" :disabled="editORshow" :maxlength="20"></Input>
            </FormItem>
            <FormItem label="危险货物名称" prop="dangName">
                <Input v-model="dangerData.dangName" placeholder="危险货物名称" :disabled="editORshow" :maxlength="80"></Input>
            </FormItem>
            <FormItem label="危包类别" prop="dangPackType" class="dangPackType">
                <RemoteSearch
                    :disabled="editORshow"
                    v-model="dangerData.dangPackType"
                    placeholder="危包类别"
                    :list="dangPackTypeList"
                    keywordFiled="label"
                    valueField="value"
                    :labelFieldList="['value', 'label']"
                ></RemoteSearch>
            </FormItem>
            <FormItem label="危包规格" prop="dangPackSpec">
                <Input
                    v-model="dangerData.dangPackSpec"
                    placeholder="危包规格"
                    :maxlength="48"
                    :disabled="editORshow"
                    @on-enter="saveDangerData"
                >
                </Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="default" @click="closeModel">取消</Button>
            <Button type="primary" @click="saveDangerData">确定</Button>
        </div>
    </Modal>
</template>

<script>
import { nextFocus, focusIndexInput } from '@/libs/ivuDom'
import { on, off } from '@/libs/tools'
import RemoteSearch from '@/view/components/RemoteSearch'

export default {
    name: 'DangerGoodsInfoModal',
    components: {
        RemoteSearch
    },
    props: {
        value: {
            default: false,
            type: Boolean
        },
        dangerGoodsInfo: {
            default: function () {
                return {
                    data: {},
                    editORshow: false
                }
            },
            type: Object
        }
    },
    data () {
        const unCodeCheck = (rule, value, callback) => {
            if (value && value.length > 20) {
                callback(new Error('UN编码长度不能超过20'))
            } else {
                callback()
            }
        }

        const dangNameCheck = (rule, value, callback) => {
            if (value && value.length > 80) {
                callback(new Error('危险货物名称长度不能超过80'))
            } else {
                callback()
            }
        }

        const dangPackSpecCheck = (rule, value, callback) => {
            if (value && value.length > 48) {
                callback(new Error('危包规格长度不能超过48'))
            } else {
                callback()
            }
        }

        return {
            editORshow: null,
            dangerData: {
                noDangFlag: '',
                unCode: '',
                dangName: '',
                dangPackType: '',
                dangPackSpec: ''
            },
            dangPackTypeList: [
                { value: '1', label: '一类' },
                { value: '2', label: '二类' },
                { value: '3', label: '三类' }
            ],
            noDangFlagList: [
                { value: '0', label: '否' },
                { value: '1', label: '是' }
            ],

            firstOption: {},

            rule: {
                unCode: [
                    { validator: unCodeCheck, trigger: 'blur' }
                ],
                dangName: [
                    { validator: dangNameCheck, trigger: 'blur' }
                ],
                dangPackSpec: [
                    { validator: dangPackSpecCheck, trigger: 'blur' }
                ]
            }
        }
    },
    created () {
        this.init(this.dangerGoodsInfo.data, this.dangerGoodsInfo.editORshow)
    },
    mounted () {
        this.bindInputKeyupEnterEvent()
    },
    methods: {
        init (data, editORshow) {
            this.editORshow = editORshow
            for (let i in data) {
                this.dangerData[i] = data[i]
            }
        },
        handleInput (v) {
            this.$emit('input', v)
        },
        closeModel () {
            this.inputs = []
            this.handleInput(false)
        },

        saveDangerData () {
            this.$refs['dangerDataRef'].validate((valid) => {
                if (valid) {
                    this.$emit('saveDangerData', this.dangerData)
                    this.closeModel()
                }
            })
        },
        handleFormEnter (event) {
            if (event.keyCode === 13) {
                nextFocus(event, this.inputs)
            }
        },
        // 绑定表单回车切换input
        bindInputKeyupEnterEvent () {
            const formRef = this.$refs.dangerDataRef
            if (formRef) {
                this.inputs = formRef.$el.querySelectorAll('input')
                off(formRef.$el, 'keyup', this.handleFormEnter)
                on(formRef.$el, 'keyup', this.handleFormEnter)
                this.$nextTick(() => {
                    this.value && focusIndexInput(0, this.inputs)
                })
            }
        }
    } // methods end
}
</script>

<style lang="less" scoped>
    .danger-goodsInfo-modal {
        .ivu-input-wrapper, .my-input-components {
            width: 200px;
        }
    }
</style>
